<template>
  <div class="chart-example-container">
    <h3>ECharts Canvas 高度100%示例</h3>
    
    <!-- 方法1: 使用 vue-echarts 组件 -->
    <div class="chart-wrapper">
      <h4>方法1: vue-echarts 组件</h4>
      <div class="chart-container">
        <v-chart 
          class="chart" 
          :option="chartOption" 
          :autoresize="true"
        />
      </div>
    </div>
    
    <!-- 方法2: 原生 ECharts 初始化 -->
    <div class="chart-wrapper">
      <h4>方法2: 原生 ECharts</h4>
      <div class="chart-container">
        <div ref="chartRef" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { defaultChartConfig } from '@/plugins/echarts'

// 图表配置
const chartOption = ref({
  ...defaultChartConfig,
  title: {
    text: 'Canvas高度100%示例',
    textStyle: {
      color: '#ffffff'
    }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    textStyle: {
      color: '#ffffff'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    axisLabel: {
      color: '#7EB7FD'
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#7EB7FD'
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(31, 99, 163, 0.2)'
      }
    }
  },
  series: [{
    name: '数据',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230],
    lineStyle: {
      color: '#7CBDCF'
    },
    itemStyle: {
      color: '#7CBDCF'
    }
  }]
})

// 原生 ECharts 实例
const chartRef = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null

// 初始化原生图表
const initNativeChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption({
    ...chartOption.value,
    title: {
      text: '原生ECharts示例',
      textStyle: {
        color: '#ffffff'
      }
    }
  })
}

// 窗口大小变化时重新调整图表大小
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

onMounted(async () => {
  await nextTick()
  initNativeChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="less" scoped>
.chart-example-container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  background: #1a1a1a;
  color: #ffffff;
  
  h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #7EB7FD;
  }
  
  h4 {
    margin-bottom: 10px;
    color: #7CBDCF;
  }
}

.chart-wrapper {
  width: 100%;
  height: 45%;
  margin-bottom: 20px;
  border: 1px solid rgba(124, 189, 207, 0.3);
  border-radius: 8px;
  padding: 15px;
  
  .chart-container {
    width: 100%;
    height: calc(100% - 40px); /* 减去标题高度 */
    
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}

/* 确保图表容器能够正确继承高度 */
:deep(.echarts) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.echarts canvas) {
  width: 100% !important;
  height: 100% !important;
}
</style>